<template>
    <div>
        <h2>以下是学生信息</h2>
        <ul>            
            <li v-for="s in students" :key="s.id">姓名：{{s.name}}, 年龄：{{s.age}}</li>
        </ul>
        <h2>计算的和为：{{number}}</h2>
        <input type="text" v-model="name">
        <button @click="add">添加一个学生</button>
        <button @click="addWang">添加一个姓王的学生</button>
    </div>

</template>

<script>
import {nanoid} from 'nanoid'
import { mapState } from 'vuex'
export default {
    name: 'Student',
    data() {
        return {
            name: ''
        }
    },
    computed:{
        // ...mapState(['studentAbout', 'countAbout'])
        ...mapState('studentAbout', ['students']),
        ...mapState('countAbout', ['number'])

    },
    methods:{
        add() {
            const student = {
                id: nanoid(),
                name: this.name,
                age: 22
            }
            // 模块化 模块名称/方法名称
            this.$store.dispatch('studentAbout/add', student)
        },
        addWang() {
            const student = {
                id: nanoid(),
                name: this.name,
                age: 22
            }
            this.$store.dispatch('studentAbout/addWang', student)
        }
    }
}
</script>

<style scoped>

</style>